<template>
  <div>
    <h2 class="form-title">创建账户</h2>
    <p class="form-subtitle">填写以下信息注册平台账号</p>
    <form @submit.prevent="$emit('submit', formData)">
      <div class="form-group">
        <i class="fas fa-user"></i>
        <input
            type="text"
            class="form-control"
            placeholder="用户名"
            v-model="formData.username"
            @blur="$emit('validate', { name: 'username', value: formData.username })"
        >
        <span class="error" v-if="errors.username">{{ errors.username }}</span>
      </div>

      <div class="form-group">
        <i class="fas fa-envelope"></i>
        <input
            type="email"
            class="form-control"
            placeholder="邮箱地址"
            v-model="formData.email"
            @blur="$emit('validate', { name: 'email', value: formData.email })"
        >
        <span class="error" v-if="errors.email">{{ errors.email }}</span>
      </div>

      <div class="form-group">
        <i class="fas fa-lock"></i>
        <input
            type="password"
            class="form-control"
            placeholder="密码（至少8位，含数字和字母）"
            v-model="formData.password"
            @blur="$emit('validate', { name: 'password', value: formData.password })"
        >
        <span class="error" v-if="errors.password">{{ errors.password }}</span>
      </div>

      <div class="form-group">
        <i class="fas fa-lock"></i>
        <input
            type="password"
            class="form-control"
            placeholder="确认密码"
            v-model="formData.confirmPassword"
            @blur="$emit('validate', { name: 'confirmPassword', value: formData.confirmPassword })"
        >
        <span class="error" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</span>
      </div>

      <button type="submit" class="btn">
        <i class="fas fa-user-plus"></i> 注册平台账号
      </button>
      <p class="security-note">* 账号信息将用于平台使用记录与权限管理</p>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    errors: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    }
  }
}
</script>

<style scoped lang="css" src="@/assets/styles/login.css">
/* 空样式，仅用于作用域 */
</style>